import routerStore from '@/stores/routerStore'
import { storeToRefs } from 'pinia'
import { defineComponent, KeepAlive, Transition } from 'vue'
import { RouterView } from 'vue-router'
import Header from './Header'
import SideNav from './SideNav'
import ActiveRoutes from './ActiveRoutes/ActiveRoutes'
import c from './Menu.module.scss'
import "./Menu.scss"
 
export default defineComponent({
  setup() {
    const { keepAliveList } = storeToRefs(routerStore())
      
    return () => <div class={`${c.app} m-window`}>
      <Header></Header>
      <div class={`${c.menuAndContent}`}>
        <SideNav></SideNav>
        <div class={`${c.routerView} m-window`}>
          <ActiveRoutes></ActiveRoutes>
          {/* 组件中写 name 就是 缓存路由*/}
          <div style={{ flex: 1 }} class="m-view-menu">
            
            <RouterView
              v-slots={{
                default: ({ Component }: { Component: () => JSX.Element }) => (
                  /*   <Transition name='slide-fade'>
                     
                    </Transition> */
                  <KeepAlive include={keepAliveList.value}>
                    <Component></Component>
                  </KeepAlive>
                )
              }}
            >
            </RouterView>
          </div>
        </div>
      </div>
    </div>
  }
})